<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>我的报名</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />

    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #fff;
        }

        .h20 {
            height: 0.5rem;
            background: #f0f0f0;
        }

        /* 无数据块 */

        .enshrine_wu_box_fiexd {
            position: fixed;
            top: 0;
            left: 0;
            background-color: #fff;
            width: 100%;
            height: 100vh;
        }

        .enshrine_wu_box {
            height: 100%;
            display: table;
        }

        .enshrine_wu {
            text-align: center;
            height: 100%;
            display: table-cell;
            vertical-align: middle;
        }

        .enshrine_wu_ico {
            width: 85%;
            margin: 0 auto 1rem;
        }

        .enshrine_wu_txt {
            font-size: 20px;
            color: #4d4d4d;
        }
        /* 数据 */
        .itemIco {
          height: 4rem;
          width: 100%;
        }

        .enshrine .aui-list-item-title {
            color: #333;
            line-height: 1rem;
            font-size: 0.75rem;
        }

        .enshrine .aui-info-item {
            color: #999;
            font-size: 0.6rem;
        }

        .enshrine .aui-list-item-media {
            width: 6.5rem;
        }

        .aui-list .registration_txtBot {
            color: #2997e4;
            font-size: 0.6rem;
        }

        .enshrine .aui-media-list .aui-list-item-inner {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
        }
    </style>
</head>

<body>

  <section class="aui-refresh-content">
<div id="app" v-cloak>

      <!-- 无数据时显示 -->
      <div v-if="code==1" class="enshrine_wu_box_fiexd">
          <div class="enshrine_wu_box">
              <div class="enshrine_wu">
                  <img src="../../image/enshrine_list_wu_ico.png" class="enshrine_wu_ico" alt="">
                  <div class="enshrine_wu_txt">还没有报名...</div>
              </div>
          </div>
      </div>

    <div v-else>
      <div class="h20"></div>
      <div class="aui-content aui-margin-b-15 enshrine">
          <ul class="aui-list aui-media-list">
              <li class="aui-list-item" v-for="item in newsList" tapmode="presshover" @click="openNewWindow(item.id,'activitydetails','活动详情')">
                  <div class="aui-media-list-item-inner">
                      <div class="aui-list-item-media">
                          <div v-if="item.images" class="itemIco" :style="'background: url('+ item.images +') center/cover no-repeat'"></div>
      										<div v-else class="itemIco" style="background: url(../../image/banner2@3x.png) center/cover no-repeat"></div>
                      </div>
                      <div class="aui-list-item-inner">
                          <div class="aui-list-item-text">
                              <div class="aui-list-item-title">{{item.title}}</div>
                          </div>
                          <div class="aui-info aui-margin-t-5" style="padding: 0;">
                              <div class="aui-info-item">{{item.apply_date}}</div>
                          </div>
                          <div class="aui-list-item-text registration_txtBot">
                              <!-- 已报名 -->
                              {{item.applyCount}}人已报名
                          </div>
                      </div>
                  </div>
              </li>
          </ul>
      </div>
    </div>


</div>
</script>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">

  apiready = function() {

    var app = new Vue({
      el: '#app',
      data: {
        newsList: [],
        token: '',
        code: 1,
      },
      created: function() {
        var $_this = this;
        $_this.token = $api.getStorage('token') || '';

        if(!$api.getStorage('token')){
          api.confirm( {
              title: '是否登录',
              msg: '确认是否登录？',
              buttons: [ '确定', '取消' ]
            }, function ( ret, err ) {
              var index = ret.buttonIndex;
              if ( index == 1 ) {
                api.openWin({
                  name: 'login',
                  url: '../five_frame/login_header.html',
                  delay: 200,
                  bounces: false
                });
                return;
              } else {
                api.closeWin({
                    name: name
                });
                return
              }
            })
            return
          }
        //  console.log($api.getStorage('token'))
        api.ajax({
         url: window.Url.myRegistration,
         method: 'GET',
         headers: {
             'baseParams':$_this.token
         },
         timeout: 300,
       }, function(ret, err) {
           if (ret.code == 0) {
            //  api.alert({ msg: JSON.stringify(ret) });
             if (ret.data.length > 0) {
               $_this.code = 0;
               $_this.newsList = ret.data
             }
           } else {
               api.alert({ msg: JSON.stringify(err) });
           }
       })

       var pullRefresh = new auiPullToRefresh({
           container: document.querySelector('.aui-refresh-content'),
           triggerDistance: 100
       },function(ret){
           if(ret.status=="success"){
             $_this.page = 1
             api.ajax({
              url: window.Url.myRegistration,
              method: 'GET',
              headers: {
                  'baseParams':$_this.token
              },
              timeout: 300,
            }, function(ret, err) {
                if (ret.code == 0) {
                 //  api.alert({ msg: JSON.stringify(ret) });
                 setTimeout(function() {
                  if (ret.data.length > 0) {
                    $_this.code = 0;
                    $_this.newsList = ret.data
                     pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                   }else {
                     pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                   }
                 },500)

                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })

           }
       })
      },
      filters: {
  		  time: function (value) {
  		    value = new Date(value)
  		    return value.getMonth() + '月' + value.getDate() + '日 ' + value.getHours() + ':' + value.getMinutes()
  		  }
  		},
      methods: {
        openLogin:function (){
  				api.openWin({
  					name: 'login',
  					url: './login_header.html',
  					bounces: false,
  					delay:200
  				});
  			},

        openNewWindow:function (id,type,title){
        		api.openWin({
        			name: type,
        			url: './forth_header.html',
        			pageParam: {id: id,name: type,title: title},
        			bounces: false,
        			delay:200
        		});
        	}
      }
    })
  }
    function goback () {
      api.closeWin({name:api.pageParam.name});
    }
</script>
</html>
